<template>
  <view class="bg-box" v-if="show_flag">
    <view class="flex">
      <view class="com-outside-box">
        <view class="flex com-box">
          <view class="com-box-left">
            <image :src="comment_data.user && comment_data.user.avatar" mode="aspectFill" class="com-avatar"></image>
          </view>
          <view class="flex flex-direction com-box-right">
            <view class="flex justify-between">
              <view class="flex flex-direction">
                <view class="com-nick-name">{{comment_data.user && comment_data.user.nick_name}}</view>
                <view class="com-created-at">{{comment_data.created_at}}</view>
              </view>
              <view class="flex justify-between">
                <image :src="comment_data.is_zan ? select_like_img : like_img" class="com-zan"
                       @click.stop="handleChangeLike(comment_data.id)"></image>
                <image src="/static/icon/comments/pinglun@2x.png" class="com-ping-lun"
                       @click.stop="comment_flag = true"></image>
              </view>
            </view>
            <view class="flex align-center com-content">
              {{ comment_data.content_html }}
            </view>
            <view class="flex flex-wrap com-images"  v-if="comment_data.imgs_arr">
              <view v-for="(com_img, com_index) in comment_data.imgs_arr" :key="com_index" class="flex" @click="handlePreviewImgs(com_img, comment_data.imgs_arr)">
                <image :src="com_img" mode="aspectFill" class="com-imgs"></image>
              </view>
            </view>
          </view>
        </view>
        <view class="" v-for="(item, index) in son_comments_list" :key="index">
          <view class="son-comment-box flex">
            <view class="son-com-left">
              <image :src="item.user && item.user.avatar" mode="aspectFill" class="son-com-avatar"></image>
            </view>
            <view class="son-com-right">
              <view class="flex flex-direction">
                <view class="flex justify-between">
                  <view class="flex flex-direction">
                    <view class="son-com-nick-name">{{item.user && item.user.nick_name}}
                    </view>
                    <view class="son-com-send-at">{{item.send_at}}</view>
                  </view>
                  <view class="flex justify-between">
                    <image :src="item.is_zan ? select_like_img : like_img" class="son-com-zan"
                           @click.stop="handleChangeCommentLike(item.id)"></image>
                  </view>
                </view>
                <view class="flex align-center son-com-content">
                  {{item.content_html}}
                </view>
                <view class="flex flex-wrap">
                  <view v-for="(img_item, img_index) in item.imgs_arr" :key="img_index" class="flex" @click="handlePreviewImgs(img_item, item.imgs_arr)">
                    <image :src="img_item" mode="aspectFill" class="comsub-imgs"></image>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view v-if="!comment_data" class="flex align-center justify-center flex-direction default-page-box">
      <image src="/static/image/no_content@2x.png" class="default-page-image"></image>
      <view class="flex justify-center default-page-text">暂无内容</view>
    </view>
    <view>
      <view class="flex align-center justify-center pull-loading-box"
            v-if="son_comments_list.length >= 15">
        <view class="pull-loading-left"></view>
        <view class="pull-loading-status-box">
          <view v-if="!bottom_flag" class="pull-loading-status-text">到底了</view>
          <view v-else class="action">
            <view class="cu-load pull-loading-status-load" :class="!is_load?'loading':'over'"></view>
          </view>
        </view>
        <view class="pull-loading-right"></view>
      </view>
    </view>
    <!--发布评论框-->
    <publishCommentDialog :comment_flag="comment_flag" :f_id="this.comment_data.f_id" :f_table="'article'" :receive_user_id="receive_user_id" :p_id="this.comment_id" @handleCloseCommentBox="handleCloseCommentBox" @handlePublishComment="handlePublishComment"></publishCommentDialog>
  </view>
</template>

<script>
import {getQiniuToken, chooseImage} from "utils/wxUtil";
import {comment_getById, comment_publishComment, comment_sonComment} from "api/comment/comment";
import {zan_changeZan} from "api/like/like";
import publishCommentDialog from "components/publish-comment-dialog/publish-comment-dialog";

export default {
  components: {
    publishCommentDialog
  },
  data() {
    return {
      show_flag: false, //显示
      article_id: '', //文章id
      receive_user_id: '', //接收人id
      is_load: false, //加载
      p_id: '', //评论id
      page: 1, //分页
      bottom_flag: true, //上拉加载
      comment_flag: false, //评论框
      select_like_img: '/static/icon/detail/dianzan-1@2x.png', //选中点赞图片
      like_img: '/static/icon/detail/dianzan@2x.png', //点赞图片
      comment_data: {}, //评论详情
      son_comment_list: [], //评论数据
      son_comments_list: [], //子评论列表
      upload_imgs: [], //上传图片
      publish_imgs: [], //要发布的图片
    }
  },
  methods: {
    pageInit(comment_id, page = 1){
      this.page = page
      comment_getById({comment_id}).then(res=>{
        console.log(res)
        this.comment_data = res.data;
        this.getSonComment(this.comment_data.f_id, this.comment_data.id, 1)
      })
      this.show_flag = true;
    },
    getSonComment(f_id, p_id, type, page = 1){
      comment_sonComment({f_table: 'article', f_id, p_id, page}).then(res=>{
        if(type){
          this.son_comments_list = [];
        }
        let temp = res.data.data;
        if(!temp.length){
          this.bottom_flag = false;
        }else {
          temp.forEach(item=>{
            this.son_comments_list.push(item)
          })
        }
      })
    },
    //预览图片
    handlePreviewImgs(img,imgs_arr){
      uni.previewImage({
        urls: imgs_arr,
        current: img
      });
    },
    //点赞
    handleChangeLike(f_id){
      zan_changeZan({f_table: 'comment',f_id}).then(res=>{
        this.comment_data.is_zan = !this.comment_data.is_zan;
      })
    },
    //评论点赞
    handleChangeCommentLike(f_id){
      zan_changeZan({f_table: 'comment',f_id}).then(res=>{
        let find = this.son_comments_list.find(x=>x.id === f_id);
        if (find) {
          find.is_zan = find.is_zan ? 0 : 1;
        }
      })
    },
    //发布评论
    handlePublishComment(publishCommentData) {
      comment_publishComment(publishCommentData).then(res=>{
        this.comment_flag = false;
        uni.showToast({
          title: res.msg,
          icon: 'none',
        })
        this.getSonComment(this.comment_data.f_id, this.comment_data.id, 1);
      }).catch(err=>{
        console.log(err)
        uni.showToast({
          title: err.msg,
          icon: 'none',
        })
      })
      this.comment_flag = false;
    },
    //关闭评论框
    handleCloseCommentBox() {
      this.comment_flag = false;
    },
    //上传图片
    handleUploadImg() {
      chooseImage(8 - this.publish_imgs.length).then(res => {
        this.upload_imgs = res.image_array;
        this.publish_imgs = this.publish_imgs.concat(this.upload_imgs);
      })
    },
    //删除图片
    handleDeleteImg(index) {
      this.publish_imgs.splice(index, 1);
    }
  },
  onLoad(e) {
    this.comment_id = e.p_id;
    this.pageInit(this.comment_id);
    getQiniuToken();
  },
  //导航栏左侧按钮
  onBackPress(){
    if (this.comment_flag) {
      this.comment_flag = false;
      return true
    }
  },
  //上拉加载
  onReachBottom() {
    if (this.bottom_flag) {
      this.is_load = false;
      this.page += 1;
      this.getSonComment(this.comment_data.f_id, this.comment_data.p_id, '', this.page);
    }
    console.log('上拉加载')
  },
  //下拉刷新
  onPullDownRefresh() {
    uni.stopPullDownRefresh();
  },

}
</script>

<style lang="less" scoped>
.son-comment-box{
  width: 100%;
  padding: 2% 0 0 12%;
}
.pull-loading-right{
  width: 30%;
  height: 2upx;
  background-color: #F1F1F1;
}
.pull-loading-status-load{
  font-size: 28upx;
  color: #CACACA;
}
.pull-loading-status-text{
  color: #CACACA;
  font-size: 24upx;
  margin: 0 40upx;
}
.pull-loading-status-box{
  width: 40%;
  text-align: center;
}
.pull-loading-left{
  width: 30%;
  height: 2upx;
  background-color: #F1F1F1;
}
.pull-loading-box{
  width: 100%;
  height: 102upx;
  padding: 0 50upx;
}
.default-page-text{
  font-size: 24upx;
  color: #999999;
}
.default-page-image{
  width: 264upx;
  height: 264upx;
}
.default-page-box{
  width: 100%;
  padding: 50% 0;
}
.son-com-content{
  width: 100%;
  padding: 20upx 0;
  font-size: 26upx;
  color: #333333;
}
.son-com-zan{
  width: 28upx;
  height: 28upx;
}
.son-com-send-at{
  font-size: 22upx;
  color: #999999;
}
.son-com-nick-name{
  font-size: 22upx;
  color: #333333;
}
.son-com-avatar{
  width: 68upx;
  height: 68upx;
  border-radius: 50%;
  margin-right: 16upx;
}
.son-com-left{
  width: 12%;
}
.son-com-right{
  width: 100%;
}
.son-com-outside-box{
  width: 100%;
  padding: 20upx 0;
}
.com-images{
  margin-bottom: 20upx;
}
.com-content{
  width: 100%;
  padding: 20upx 0;
  font-size: 26upx;
  color: #333333;
}
.com-ping-lun{
  width: 30upx;
  height: 28upx;
  margin-left: 40upx;
}
.com-zan{
  width: 28upx;
  height: 28upx;
}
.com-created-at{
  font-size: 22upx;
  color: #999999;
}
.com-nick-name{
  font-size: 22upx;
  color: #333333;
}
.com-box-right{
  width: 88%;
}
.com-avatar{
  width: 68upx;
  height: 68upx;
  border-radius: 50%;
  margin-right: 16upx;
}
.com-box-left{
  width: 12%;
}
.com-box{
  border-bottom: 2upx solid #F8F8F8;
  padding: 20upx 0;
}
.com-outside-box{
  width: 100%;
  padding: 0 20upx;
}
.bg-box{
  width: 100%;
  min-height: 100vh;
}
.comsub-imgs{
  width: 178upx;
  height: 152upx;
  border-radius: 10upx;
  margin: 0 5% 5% 0;
}
.com-imgs{
  width: 200upx;
  height: 174upx;
  border-radius: 10upx;
  margin: 0 5% 5% 0;
}
.textarea {
  background-color: #F8F8F8;
  width: 590upx;
  height: 202upx;
  border-radius: 10upx;
  padding: 22upx;
  font-size: 26upx;
  text-align: left;
  margin-bottom: 20upx;
}
</style>
